<template>
  <div class="app-container">
    <el-divider>
      <div class="my-divider">基础信息</div>
    </el-divider>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px" size="small"
    >
      <el-form-item label="检验单名称" prop="reportQcName">
        <el-input v-model="form.reportQcName" placeholder="请输入质检单名称"
                  class="my-input"
        />
      </el-form-item>
      <el-form-item label="检验类型" prop="reportType">
        <el-select
          v-model="form.reportType"
          placeholder="请选择检验类型"
          class="my-input"
        >
          <el-option
            v-for="dict in getQualityType"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="检验日期" prop="reportQcTime">
        <el-date-picker clearable
                        v-model="form.reportQcTime"
                        type="datetime"
                        value-format="yyyy-MM-dd hh:mm:ss"
                        placeholder="请选择质检时间"
                        class="my-input"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="检验人" prop="reportQcPeo">
        <el-input :value="form.reportQcPeoName" disabled class="my-input"
        />
      </el-form-item>
      <el-form-item label="备注" prop="reportDesc" class="my-desc">
        <el-input v-model="form.reportDesc" type="textarea" placeholder="请输入内容" :autosize="{minRows: 3}"
        />
      </el-form-item>

      <el-divider>
        <div class="my-divider">工单信息</div>
      </el-divider>
      <el-form-item label="工单名称" prop="reportOCodeName">
        <el-input :value="form.reportOCodeName"
                  class="my-input" disabled
        />
      </el-form-item>
      <el-form-item label="工单编号" prop="reportOCode">
        <el-input v-model="form.reportOCode"
                  class="my-input" disabled
        />
      </el-form-item>
      <el-form-item label="产品名称" prop="reportPCode">
        <el-input :value="form.gbsGood ? form.gbsGood.pdName : ''"
                  class="my-input" disabled
        />
      </el-form-item>
      <el-form-item label="产品编号" prop="reportPCode">
        <el-input :value="form.gbsGood ? form.gbsGood.pdCode : ''"
                  class="my-input" disabled
        />
      </el-form-item>
      <el-form-item label="规格型号" prop="reportPCode">
        <el-input :value="form.gbsGood ? form.gbsGood.pdSpecType : ''"
                  class="my-input" disabled
        />
      </el-form-item>
      <el-form-item label="产品类型" prop="reportPCode">
        <el-input
          :value="form.gbsGood && form.gbsGood.gbsGoodClass ? form.gbsGood.gbsGoodClass.gcName : ''"
          class="my-input" disabled
        />
      </el-form-item>
      <el-form-item label="单位" prop="reportPCode">
        <el-input
          :value="form.gbsGood && form.gbsGood.gbsGoodUnit ? form.gbsGood.gbsGoodUnit.guName : ''"
          class="my-input" disabled
        />
      </el-form-item>
      <el-form-item label="工单批次" prop="reportOBatch">
        <el-input v-model="form.reportOBatch"
                  class="my-input" disabled
        />
      </el-form-item>

      <el-divider>
        <div class="my-divider">任务信息</div>
      </el-divider>
      <el-form-item label="任务名称" prop="reportTCodeName">
        <el-input :value="form.reportTCodeName" disabled
                  class="my-input"
        />
      </el-form-item>
      <el-form-item label="任务编号" prop="reportTCode">
        <el-input v-model="form.reportTCode"
                  class="my-input" disabled
        />
      </el-form-item>
      <el-form-item label="生产单元" prop="reportWCellName">
        <el-input v-model="form.reportWCellName" disabled
                  class="my-input"
        />
      </el-form-item>
      <el-form-item label="工艺路线" prop="reportRouteName">
        <el-input v-model="form.reportRouteName" disabled
                  class="my-input"
        />
      </el-form-item>
      <el-form-item label="工序编号" prop="reportProcedure">
        <el-input v-model="form.reportProcedure" disabled
                  class="my-input"
        />
      </el-form-item>
      <el-form-item label="工序名称" prop="reportProcedureName">
        <el-input v-model="form.reportProcedureName" disabled
                  class="my-input"
        />
      </el-form-item>
      <el-form-item label="生产班组" prop="reportGroupName">
        <el-input v-model="form.reportGroupName" disabled
                  class="my-input"
        />
      </el-form-item>
      <el-form-item label="任务负责人" prop="wtaskManager">
        <el-input :value="form.reportWMangerName" disabled
                  class="my-input"
        />
      </el-form-item>

      <el-divider>
        <div class="my-divider">检验项目</div>
      </el-divider>
      <div style="display: block;flex: 1">
        <div>
          <el-button type="primary" @click="handleToAddProject">添加</el-button>
          <el-button type="primary" plain @click="handleRemoveProject">
            移除
          </el-button>
        </div>
        <el-table :data="form.selectedProjectList ? form.selectedProjectList: []"
                  @selection-change="selectChangeProject"
        >
          <el-table-column type="selection" align="center" />
          <el-table-column label="序号" type="index" align="center" />
          <el-table-column label="质检项目编码" align="center" prop="qualityCode" />
          <el-table-column label="项目名称" align="center" prop="qualityProjectName" />
          <el-table-column label="检验标准" align="center" prop="qualityProjectStandard" />
          <el-table-column label="项目最大值" align="center" prop="qualityProjectMax" />
          <el-table-column label="项目最小值" align="center" prop="qualityProjectMin" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="lookDrawbackDialog(scope.$index)"
              >查看缺陷
              </el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="openDrawbackDialog(scope.$index)"
              >缺陷填报
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-descriptions :colon="false" :column="2">
        <el-descriptions-item :span="2">
          <el-divider>
            <div class="my-divider">报工信息</div>
          </el-divider>
        </el-descriptions-item>
        <el-descriptions-item label="报工人员">
          {{ form.reportPeoName }}
        </el-descriptions-item>
        <el-descriptions-item label="报工数量">
          {{ form.reportCompleteNum }}
        </el-descriptions-item>
        <el-descriptions-item label="报工时间" :span="2">
          {{ form.reportTime }}
        </el-descriptions-item>
      </el-descriptions>

      <el-divider>
        <div class="my-divider">检验结果</div>
      </el-divider>
      <el-form-item label="检测数量" prop="reportQcNum">
        <el-input-number v-model="form.reportQcNum"
                         class="my-input"
        />
      </el-form-item>
      <el-form-item label="合格数量" prop="reportGood">
        <el-input-number v-model="form.reportGood"
                         class="my-input"
        />
      </el-form-item>
      <el-form-item label="检测结果" prop="reportResult">
        <el-select
          v-model="form.reportResult"
          placeholder="请选择检验类型"
          class="my-input"
        >
          <el-option
            v-for="dict in getQualityYesNo"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
    </el-form>

    <!--    提交按钮-->
    <MyConfirmBtnGroup :after-cancel-open-page="backPage" :ok-event="submitForm" />

    <!--    选择质检项目-->
    <el-dialog title="选择质检项目" :visible.sync="projectDialogVisible" width="50%" append-to-body>
      <el-form :model="projectQueryParams" ref="projectQueryForm" size="small" :inline="true" label-width="68px">
        <el-form-item label="质检编码" prop="qualityCode">
          <el-input
            v-model="projectQueryParams.qualityCode"
            placeholder="请输入质检项目编码"
            clearable
            @keyup.enter.native="projectHandleQuery"
          />
        </el-form-item>
        <el-form-item label="项目名称" prop="qualityProjectName">
          <el-input
            v-model="projectQueryParams.qualityProjectName"
            placeholder="请输入项目名称"
            clearable
            @keyup.enter.native="projectHandleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="projectHandleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="projectResetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="projectLoading" :data="projectList"
                @selection-change="selectChangePreProject"
      >
        <el-table-column type="selection" align="center" />
        <el-table-column type="index" label="序号" align="center" />
        <el-table-column label="质检项目编码" align="center" prop="qualityCode" />
        <el-table-column label="项目名称" align="center" prop="qualityProjectName" />
        <el-table-column label="检验标准" align="center" prop="qualityProjectStandard" />
        <el-table-column label="项目最大值" align="center" prop="qualityProjectMax" />
        <el-table-column label="项目最小值" align="center" prop="qualityProjectMin" />
      </el-table>

      <pagination
        v-show="projectTotal>0"
        :total="projectTotal"
        :page.sync="projectQueryParams.pageNum"
        :limit.sync="projectQueryParams.pageSize"
        @pagination="projectGetList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="okProject">确 定</el-button>
        <el-button @click="cancelProject">取 消</el-button>
      </div>
    </el-dialog>

    <!--    选择缺陷-->
    <el-dialog title="选择缺陷" :visible.sync="drawbackDialogVisible" width="50%" append-to-body>
      <el-form :model="drawbackQueryParams" ref="drawbackQueryForm" size="small" :inline="true" label-width="68px">
        <el-form-item label="缺陷编号" prop="drawbackCode">
          <el-input
            v-model="drawbackQueryParams.drawbackCode"
            placeholder="请输入缺陷编号"
            clearable
            @keyup.enter.native="drawbackHandleQuery"
          />
        </el-form-item>
        <el-form-item label="缺陷名称" prop="drawbackName">
          <el-input
            v-model="drawbackQueryParams.drawbackName"
            placeholder="请输入缺陷名称"
            clearable
            @keyup.enter.native="drawbackHandleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="drawbackHandleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="drawbackResetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table ref="drawbackTable" v-loading="drawbackLoading" :data="drawbackList"
                @selection-change="handleSelectDrawbackChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="缺陷编号" align="center" prop="drawbackCode" />
        <el-table-column label="缺陷名称" align="center" prop="drawbackName" />
        <el-table-column label="缺陷类型编码" align="center" prop="qcDrawbackType.drawbackTypeName" />
        <el-table-column label="缺陷状态" align="center" prop="drawbackStatus">
          <template slot-scope="scope">
            <dict-tag :options="getStatus" :value="scope.row.drawbackStatus" />
          </template>
        </el-table-column>
        <el-table-column label="缺陷描述" align="center" prop="drawbackDetail" />
      </el-table>

      <pagination
        v-show="drawbackTotal>0"
        :total="drawbackTotal"
        :page.sync="drawbackQueryParams.pageNum"
        :limit.sync="drawbackQueryParams.pageSize"
        @pagination="drawbackGetList"
      />

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="okDrawback">确 定</el-button>
        <el-button @click="cancelDrawback">取 消</el-button>
      </div>
    </el-dialog>

    <!--    查看缺陷-->
    <el-dialog title="选择缺陷" :visible.sync="projectDrawbackDialogVisible" width="50%" append-to-body>
      <el-table ref="projectDrawbackTable" :data="projectDrawbackList">
        <el-table-column label="缺陷编号" align="center" prop="drawbackCode" />
        <el-table-column label="缺陷名称" align="center" prop="drawbackName" />
        <el-table-column label="缺陷类型编码" align="center" prop="qcDrawbackType.drawbackTypeName" />
        <el-table-column label="缺陷状态" align="center" prop="drawbackStatus">
          <template slot-scope="scope">
            <dict-tag :options="getStatus" :value="scope.row.drawbackStatus" />
          </template>
        </el-table-column>
        <el-table-column label="缺陷描述" align="center" prop="drawbackDetail" />
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDrawback">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import MyPopoverBtn from '@/components/MyPopoverBtn/index.vue'
import MyConfirmBtnGroup from '@/components/MyConfirmBtnGroup/index.vue'
import { listProject } from '@/api/yyj/qc/project'
import { listDrawback } from '@/api/yyj/qc/drawback'
import { getProWorkReport, updateProWorkReport } from '@/api/yyj/pro/workReport'

export default {
  name: 'WorkQualityChange',
  components: { MyConfirmBtnGroup, MyPopoverBtn },
  dicts: ['qc_quality_type', 'yyj_common_status', 'qc_quality_yes_no'],
  data() {
    return {
      backPage: '/pro/workReport',
      qcPeoDialogVisible: false,
      workOrderDialogVisible: false,
      projectDialogVisible: false,
      orderTaskDialogVisible: false,
      drawbackDialogVisible: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        reportQcName: [
          { required: true, message: '检验单名称不能为空', trigger: 'blur' }
        ],
        reportType: [
          { required: true, message: '检验类型不能为空', trigger: 'change' }
        ],
        reportQcTime: [
          { required: true, message: '检验日期不能为空' }
        ],
        reportResult: [
          { required: true, message: '检验结果不能为空' }
        ]
      },
      deptName: undefined,
      // 部门树选项
      deptOptions:
      undefined,
      defaultProps:
        {
          children: 'children',
          label:
            'label'
        }
      ,
      // 查询参数
      userQueryParams: {
        userName: undefined,
        phonenumber:
        undefined,
        status:
          '0',
        deptId:
        undefined
      }
      ,
      // 检验人list
      qcPeoList: [],
      // 预选检验人
      preSelectedQcPeo:
        {}
      ,
      // 遮罩层
      workOrderLoading: true,
      // 总条数
      workOrderTotal:
        0,
      // 生产工单表格数据
      workOrderList:
        [],
      // work-order dialog
      workOrderQueryParams:
        {
          pageNum: 1,
          pageSize:
            10,
          scheduleCode:
            null,
          workOrderName:
            null,
          workOrderDesc:
            null,
          workOrderStatus:
            null,
          workOrderCloseR:
            null,
          workOrderProduct:
            null,
          workOrderRoute:
            null,
          workOrderBatch:
            null,
          workOrderNum:
            null
        }
      ,
      // 预选的工单
      preSelectedWorkOrder: {}
      ,
      // 查询参数
      orderTaskQueryParams: {
        pageNum: 1,
        pageSize:
          10,
        wtaskQcPeo:
          null,
        wtaskWoCode:
          null,
        wtaskProcedureCode:
          null,
        wtaskStatus:
          null,
        wtaskPCloseReason:
          null,
        wtaskPDesc:
          null
      }
      ,
      // 遮罩层
      orderTaskLoading: true,
      // 总条数
      orderTaskTotal:
        0,
      // 工单任务表格数据
      workTaskList:
        [],
      // 预选的工单任务
      preSelectedOrderTask:
        {}
      ,
      // 质检项目加载
      projectLoading: false,
      preSelectedProjectList:
        [],
      // 准备移除的项目
      preRemoveProjectList:
        [],
      // dialog - project
      projectList:
        [],
      // 总条数
      projectTotal:
        0,
      // 查询参数
      projectQueryParams:
        {
          pageNum: 1,
          pageSize:
            10,
          qualityCode:
            null,
          qualityProjectName:
            null,
          qualityProjectStandard:
            null,
          qualityProjectMax:
            null,
          qualityProjectMin:
            null,
          qualityProjectDesc:
            null
        }
      ,
      // 查询参数
      drawbackQueryParams: {
        pageNum: 1,
        pageSize:
          10,
        drawbackCode:
          null,
        drawbackTypeCode:
          null,
        drawbackTypeName:
          null,
        drawbackName:
          null,
        drawbackStatus:
          null,
        drawbackDetail:
          null,
        drawbackDesc:
          null
      }
      ,
      drawbackLoading: false,
      drawbackTotal:
        0,
      drawbackList:
        [],
      preSelectedDrawbackList:
        [],
      currentDrawbackIndex:
        -1,
      projectDrawbackDialogVisible:
        false,
      projectDrawbackList:
        []
    }
  }
  ,
  computed: {
    getQualityType() {
      return this.dict.type.qc_quality_type
    }
    ,
    getStatus() {
      return this.dict.type.yyj_common_status
    }
    ,
    getQualityYesNo() {
      return this.dict.type.qc_quality_yes_no
    }
  }
  ,
  created() {
    const reportCode = this.$route.params.reportCode
    Promise.all([
      this.projectGetList(),
      this.drawbackGetList(),
      this.getDetailInfo(reportCode)
    ])
  }
  ,
  methods: {
    lookDrawbackDialog(index) {
      this.projectDrawbackList = this.form.selectedProjectList[index].drawbackList
      this.projectDrawbackDialogVisible = true
    }
    ,
    closeDrawback() {
      this.projectDrawbackList = []
      this.projectDrawbackDialogVisible = false
    }
    ,
    // 获取此页面的详细信息
    async getDetailInfo(reportCode) {
      const res = await getProWorkReport(reportCode)
      console.log(res)
      this.form = res.data
      // this.form.gbsGood = res.gbsGood
      // this.form.selectedOrderTask = res.selectedOrderTask
      // this.form.selectedQcPeo = res.selectedQcPeo
      // this.form.selectedProjectList = res.selectedProjectList
    }
    ,
    // 打开drawback-dialog
    openDrawbackDialog(index) {
      this.currentDrawbackIndex = index
      this.drawbackDialogVisible = true
    }
    ,
    okDrawback() {
      this.form.selectedProjectList[this.currentDrawbackIndex].drawbackList = this.preSelectedDrawbackList
      this.cancelDrawback()
    }
    ,
    cancelDrawback() {
      this.currentDrawbackIndex = -1
      this.drawbackDialogVisible = false
    }
    ,
    // 预选择drawback
    handleSelectDrawbackChange(selection) {
      this.preSelectedDrawbackList = selection
    }
    ,
    /** 搜索按钮操作 */
    drawbackHandleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    }
    ,
    /** 重置按钮操作 */
    drawbackResetQuery() {
      this.resetForm('drawbackQueryForm')
      this.drawbackHandleQuery()
    }
    ,
    /** 查询缺陷列表 */
    async drawbackGetList() {
      this.drawbackLoading = true
      const res = await listDrawback(this.drawbackQueryParams)
      this.drawbackList = res.rows
      this.drawbackTotal = res.total
      this.drawbackLoading = false
    }
    ,
    // 预选择project
    selectChangePreProject(selection) {
      this.preSelectedProjectList = selection
    }
    ,
    // 确定项目
    okProject() {
      this.form.selectedProjectList = this.preSelectedProjectList
      this.cancelProject()
    }
    ,
    // 取消项目
    cancelProject() {
      this.projectDialogVisible = false
    }
    ,
    /** 搜索按钮操作 */
    projectHandleQuery() {
      this.projectQueryParams.pageNum = 1
      this.getList()
    }
    ,
    /** 重置按钮操作 */
    projectResetQuery() {
      this.resetForm('projectQueryForm')
      this.projectHandleQuery()
    }
    ,
    // 选择项目
    selectChangeProject(selection) {
      this.preRemoveProjectList = selection
    }
    ,
    // 去添加项目
    handleToAddProject() {
      this.projectDialogVisible = true
    }
    ,
    // 移除已选择的项目
    handleRemoveProject(index) {
      this.form.selectedProjectList.splice(index, 1)
    }
    ,
    /** 查询质检项目列表 */
    async projectGetList() {
      this.projectLoading = true
      const res = await listProject(this.projectQueryParams)
      this.projectList = res.rows
      this.projectTotal = res.total
      this.projectLoading = false
    }
    ,
    reset() {
      this.form = {}
      this.resetForm('form')
    }
    ,
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(async valid => {
        if (valid) {
          this.form.reportQc = 1
          console.log('this.form ', this.form)
          this.$modal.loading('正在提交...')
          await updateProWorkReport(this.form)
          this.$modal.msgSuccess('提交成功')
          this.afterSubmit()
        }
      })
    }
    ,
    afterSubmit() {
      this.$tab.closeOpenPage()
      this.reset()
      this.$tab.refreshPage({
        path: this.backPage
      })
      this.$modal.closeLoading()
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/yyj/change';
</style>
